<template>
  <div>
    <el-form-item label="占位内容" label-width="100px" label-position="left">
      <el-input
        size="small"
        v-model="data.placeholder"
        placeholder="自动计算"
      ></el-input>
    </el-form-item>
    <el-form-item label="公式类型">
      <el-select
        size="small"
        placeholder="请选择公式类型"
        v-model="data.formulaType"
      >
        <el-option
          v-for="item in formulaType"
          :key="item.label"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
    </el-form-item>
    <div class="pop" @click="handleOpen">
      <span class="font1">计算公式 = </span>
      <span class="vhtml" v-html="data.showContent" />
    </div>

    <template v-if="isOpen">
      <Modal
        :isOpen="isOpen"
        :item="data"
        :widgetForm="widgetForm"
        @on-close="onOpenClose"
        @on-save="handleSave"
      />
    </template>
  </div>
</template>

<script>
  import Modal from './Modal.vue';
  import { formulas } from './index';

  export default {

    components: {
      Modal
    },
    props: ['data', 'widgetForm'],
    data() {
      return {
        isOpen: false,
        formulaType: [
          {
            value: formulas.number,
            label: '数字'
          },
          {
            value: formulas.timeDifference,
            label: '时差'
          },
          {
            value: formulas.timeDifferenceRange,
            label: '范围时差'
          },
          {
            value: formulas.date,
            label: '时间'
          }
        ]
      };
    },
    methods: {
      handleOpen() {
        this.isOpen = true;
      },
        onOpenClose() {
            this.isOpen = false;
        },
      handleSave({
        showContent,
        content,
        labels,
        values,
        firstDateProp,
        secondDateProp,
        dateUnit,
        addOrSubtract,
        timeType
      }) {
        console.log(this.widgetForm);
        this.data.showContent = showContent;
        if (content) {
          this.data.content = content;
        }
        if (labels.length) {
          this.data.labels = labels;
        }
        if (values.length) {
          this.data.values = values;
        }
        if (firstDateProp) {
          this.data.firstDateProp = firstDateProp;
        }
        if (secondDateProp) {
          this.data.secondDateProp = secondDateProp;
        }
        if (dateUnit) {
          this.data.dateUnit = dateUnit;
        }
        if (addOrSubtract) {
          this.data.addOrSubtract = addOrSubtract;
        }
        if (timeType) {
          this.data.timeType = timeType;
        }
        /**
         * 这里解决组件配置数据修改后，保存没有生效问题
         * 需要从组件内部一层一层向外传递
         * 组件配置文件->WidgetConfig.vue->index.vue->Formdesign.vue->Layout.vue
         */
        //点击确定按钮后，将计算公式改变后的数据向外层传递
        this.$emit('on-mode', this.widgetForm);
      }
    }
  };
</script>

<style lang="scss" scoped>
  .pop {
    border: 1px solid #ccc;
    padding: 10px;
    border-radius: 4px;
    cursor: pointer;
    color: #000;
  }
  .font1 {
    color: #666;
  }
</style>
